<template>
	<view class="rank-item">
		<!-- sname,college_name,get_score -->
		<text class="num">{{rank}}</text>
		<!-- <text class="line">-</text> -->
		<view class="right" style="border-bottom: 1px solid #f1f1f1;">
			<!-- <image class="avatar" :src="item.avatar" mode="widthFix"></image> -->
			<view class="info">
				<text class="sname">{{item.sname}}</text>
				<text class="class">{{item.college_name}}</text>
			</view>
			<text class="score">{{item.get_score}}分</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			rank:{
				type: Number,
				default: -1
			},
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rank-item {
		padding: 0 30upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 28upx;
		align-items: center;
	}

	.avatar {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.right {
		display: block;
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: space-around;
		padding: 20upx 0;
		align-items: center;
	}

	.num {
		color: #999999;
		font-size: 28upx;
		width: 50upx;
	}

	.line {
		margin-right: 22upx;
		margin-left: 22upx;
		color: #377cfd;
	}

	.info {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding-left: 30upx;
	}

	.class {
		font-size: 20upx;
		color: #999;
	}

	.score {
		color: #377cfd;
		font-size: 32upx;
		font-weight: 700;
	}
</style>
